@import 'settings.global';
@import 'settings.colors';
@import 'tools.functions';

// shared pseudo-element styles
@mixin view-tab-pseudo-reset {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  content: '';
}


.view-tab {
  // local component variables
  $tab-height: 31px;
  $tab-triangle-width: 12px;
  $tab-triangle-height: 30px;
  $color-text: $color-border-default;
  $color-border: $color-border-default;
  $color-background: $color-background-gallery;
  $color-background-hover: lighten($color-background, 3%);
  $color-background-active: $color-white;

  font-size:14px;
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: 80px;
  width:auto;
  text-align: center;
  height: $tab-height + 1; // 1px border-bottom width
  margin-left: -$tab-triangle-width;
  padding: 0 $tab-triangle-width;
  color: $color-text;
  border-bottom: 1px solid $color-border;

  &::before {
    @include view-tab-pseudo-reset;

    z-index: 0;
    left: 0;
    border-top: $tab-triangle-height solid transparent;
    border-right: $tab-triangle-width solid $color-border;
  }

  &::after {
    @include view-tab-pseudo-reset;

    z-index: 0;
    right: 0;
    border-top: $tab-triangle-height solid transparent;
    border-left: $tab-triangle-width solid $color-border;
  }

  &__inner {
    // reset inner trangle size
    $tab-triangle-width: $tab-triangle-width - 1;
    $tab-triangle-height: $tab-triangle-height - 2;

    line-height: $tab-height - 1; // 1px border-top width
    position: relative;
    height: $tab-height;
    padding-left: 10px;
    cursor: pointer;
    border-top: 1px solid $color-border;
    background: $color-background-gallery;
    transition: background $global-transition;

    &::before {
      @include view-tab-pseudo-reset;

      z-index: 1;
      left: -$tab-triangle-width;
      border-top: $tab-triangle-height solid transparent;
      border-right: $tab-triangle-width solid $color-background;
      transition: border-right-color $global-transition;
    }

    &::after {
      @include view-tab-pseudo-reset;

      z-index: 1;
      right: -$tab-triangle-width;
      display: table;
      clear: both; // manually clearfix
      border-top: $tab-triangle-height solid transparent;
      border-left: $tab-triangle-width solid $color-background;
      transition: border-left-color $global-transition;
    }

    &:hover {
      background: $color-background-hover;

      &::before {
        border-right-color: $color-background-hover;
      }

      &::after {
        border-left-color: $color-background-hover;
      }
    }
   & .acticon{
      font-size: 18px;
      font-weight: 900;
    }
   & .acticon:hover{
      color: red;
    }
  }

  &__text {
    float: left;
    //width: calc(100% - 20px);
    color: $color-text-dusty-gray;
    padding: 0px 8px 0px 0px;
  }

  &__close {
    font-size: 18px;
    line-height: 1;
    float: right;
    margin-top: 5px;
    padding: 0 4px;
    color: $color-text;

    &:focus {
      outline: none;
    }

    &:hover {
      color: $color-ecstasy;
    }
  }

  &.is-active {
    z-index: 10;
    border-bottom-color: $color-background-active;

    > .view-tab__inner {
      background: $color-background-active;

      &::before {
        border-right-color: $color-background-active;
      }

      &::after {
        border-left-color: $color-background-active;
      }
    }
  }
}
